<template>
    <div class="weather" v-if="localWeater.realtime">
        <div class="temperature">{{ localWeater.realtime.temperature }}°</div>

        <div class="right">
            <div :class="gradeColor(localWeater.realtime.aqi)">
                {{ localWeater.city }}
                {{ addGrade(localWeater.realtime.aqi) }}
            </div>

            <div class="bottom">
                <img :src="weatherImgUrl" class="wid" />
                <div class="info">{{ localWeater.realtime.info }}</div>
                <div>{{ localWeater.realtime.direct }}</div>
                <div>{{ localWeater.realtime.power }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import { get } from '../../request/index'
import dayjs from 'dayjs'
export default {
    data() {
        return {
            localWeater: {},
            weatherImgUrl: '',
        }
    },

    created() {
        const localWeater = JSON.parse(localStorage.getItem('localWeater') || '{}')

        if (localWeater.future && localWeater.future[0].date === dayjs().format('YYYY-MM-DD')) {
            this.localWeater = localWeater
            return
        }

        get('http://106.13.91.201:3000').then(res => {
            this.localWeater = res.weather.result
            localStorage.setItem('localWeater', JSON.stringify(this.localWeater))
        })
    },

    watch: {
        localWeater: function (newWeather) {
            this.weatherImgUrl = require(`../../assets/img/weather_icon/g2/120x120/day/${newWeather.realtime.wid}.png`)
        },
    },

    methods: {
        gradeColor(num) {
            if (num < 50) {
                return 'aqi aqi-bg1'
            }
            if (num < 100) {
                return 'aqi aqi-bg2'
            }
            if (num < 150) {
                return 'aqi aqi-bg3'
            }
            if (num < 200) {
                return 'aqi aqi-bg4'
            }
            if (num < 300) {
                return 'aqi aqi-bg5'
            }
            return 'aqi aqi-bg6'
        },
        addGrade(num) {
            if (num < 50) {
                return num + ' 优'
            }
            if (num < 100) {
                return num + ' 良'
            }
            if (num < 150) {
                return num + ' 轻度污染'
            }
            if (num < 200) {
                return num + ' 中度污染'
            }
            if (num < 300) {
                return num + ' 重度污染'
            }
            return num + '严重污染'
        },
    },
}
</script>

<style lang="less" scoped>
.weather {
    height: 100px;
    width: 300px;
    color: #fff;
    display: flex;

    .temperature {
        font-size: 50px;
        font-weight: normal;
        line-height: 100px;
        text-align: center;
        width: 100px;
    }

    .right {
        padding-top: 26px;
        font-size: 14px;
        margin-left: 10px;

        .aqi {
            color: #fff;
            display: inline-block;
            padding: 0 8px;
            border-radius: 10px;
            font-size: 12px;
        }

        .aqi-bg1 {
            background: #40c057;
        }
        .aqi-bg2 {
            background: #82c91e;
        }
        .aqi-bg3 {
            background: #f76707;
        }
        .aqi-bg4 {
            background: #e03131;
        }
        .aqi-bg5 {
            background: #e71420;
        }
        .aqi-bg6 {
            background: #540822;
        }

        .bottom {
            margin-top: 8px;
            display: flex;
            font-size: 15px;

            img {
                width: 24px;
                height: 24px;
                margin-right: 4px;
            }

            div {
                margin-right: 6px;
                line-height: 24px;
            }
        }
    }
}
</style>
